.root {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	left: 0;
	top: 0;
}

.tapbox {
	height: 10rem;
	width: 100%;
	border-top: 1px solid #eee;
	background-color: rgba(255, 255, 255, 1);
	position: absolute;
	bottom: 0;
	z-index: 110
}

.bar {
	height: 3rem;
	div {
		display: inline-block;
		line-height: 3rem;
		padding: 0 0.5rem;
	}
}

.tpl {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.tpl1 {
	position: relative;
	color: #fff;

	.mainpic {
		width: 100%;
		position: relative;
		z-index: 100;
	}

	.face {
		position: absolute;
		width: 8rem;
		height: 8rem;
		z-index: 10;
		top: 6rem;
		left: 3rem;
	}

	.code {
		position: absolute;
		width: 5.7rem;
		z-index: 100;
		top: 28rem;
		left: 10.6rem;
		text-align: center;
		color: #fff;

		img {
			width: 5.5rem;
			height: 5.5rem;
		}

		p {font-size: 0.8rem}
	}

	.jf {
		font-size: 2.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.54rem;
		left: 21.5rem;
	}

	.name {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 16rem;
		left: 4.5rem;
	}

	.info {
		font-size: 1rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 19rem;
		left: 4.5rem;
	}
}

.tpl2 {
	position: relative;
	color: #fff;

	.mainpic {
		width: 100%;
		position: relative;
		z-index: 100;
	}

	.face {
		position: absolute;
		width: 10.2rem;
		height: 10.2rem;
		z-index: 10;
		top: 1rem;
		left: 15.2rem;
	}

	.code {
		position: absolute;
		width: 6.5rem;
		z-index: 100;
		top: 4rem;
		left: 3rem;
		text-align: center;
		color: #fff;

		img {
			width: 6.5rem;
			height: 6.5rem;
		}

		p {font-size: 0.8rem}
	}

	.jf {
		font-size: 2.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.54rem;
		left: 21.5rem;
	}

	.tag {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.2rem;
		left: 14.8rem;
		width: 11rem;
		height: 2.6rem;
	}

	.name {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.2rem;
		left: 16.3rem;
		width: 8rem;
		height: 2.2rem;
		line-height: 2.2rem;
	}

	.info {
		font-size: 1rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 17rem;
		left: 13.5rem;
		width: 12rem;
		line-height: 2.5rem;
		span {
			font-size: 1.2rem;
			font-weight: bolder;
		}
	}
}


.tpl3 {
	position: relative;
	color: #fff;

	.mainpic {
		width: 100%;
		position: relative;
		z-index: 100;
	}

	.face {
		position: absolute;
		width: 10rem;
		height: 10rem;
		z-index: 10;
		top: 11.5rem;
		left: 0.7rem;
	}

	.code {
		position: absolute;
		width: 6.5rem;
		z-index: 100;
		top: 16rem;
		right: 2.7rem;
		text-align: center;
		color: #000;

		img {
			width: 6.5rem;
			height: 6.5rem;
		}

		p {font-size: 0.8rem}
	}

	.jf {
		font-size: 2.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.54rem;
		left: 21.5rem;
	}

	.tag {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.2rem;
		left: 14.8rem;
		width: 11rem;
		height: 2.6rem;
	}

	.name {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.2rem;
		left: 16.3rem;
		width: 8rem;
		height: 2.2rem;
		line-height: 2.2rem;
	}

	.info {
		font-size: 1rem;
		color: #000;
		position: absolute;
		z-index: 101;
		top: 22rem;
		left: 1.5rem;
		width: 12rem;
		line-height: 2rem;
		span {
			font-size: 1.2rem;
			font-weight: bolder;
		}
	}
}

.tpl4 {
	position: relative;
	color: #fff;

	.mainpic {
		width: 100%;
		position: relative;
		z-index: 100;
	}

	.face {
		position: absolute;
		width: 14.2rem;
		height: 14.2rem;
		z-index: 10;
		top: 6.5rem;
		left: 6rem;
	}

	.code {
		position: absolute;
		width: 5.7rem;
		z-index: 100;
		top: 0.7rem;
		left: 0.6rem;
		text-align: center;
		color: #fff;

		img {
			width: 5.5rem;
			height: 5.5rem;
		}

		p {font-size: 0.8rem}
	}

	.jf {
		font-size: 2.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.54rem;
		left: 21.5rem;
	}

	.tag {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.2rem;
		left: 14.8rem;
		width: 11rem;
		height: 2.6rem;
	}

	.name {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 1rem;
		left: 9.3rem;
		width: 8rem;
		height: 2.2rem;
		line-height: 2.2rem;
		font-weight: bold;
	}

	.tel {
		font-size: 1.2rem;
		text-align: center;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 3.5rem;
		left: 9.3rem;
		width: 8rem;
		height: 2.2rem;
		line-height: 2.2rem;
	}

	.djpf {
		text-align: center;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 22rem;
		left: 9.3rem;
		width: 8rem;
		height: 2.2rem;
		span{
			font-size: 4rem;
		}
	}

	.info {
		    font-size: 1rem;
			color: #fff;
			position: absolute;
			z-index: 101;
			top: 28rem;
			left: 8.8rem;
			width: 9rem;
			text-align: center;
		span {
			font-weight: bolder;
			display: block;
		}
	}
}


.tpl5 {
	position: relative;
	color: #fff;

	.mainpic {
		width: 100%;
		position: relative;
		z-index: 100;
	}

	.face {
		    position: absolute;
			width: 8.8rem;
			height: 8.8rem;
			z-index: 10;
			top: 7.2rem;
			left: 3rem;
		}

	.code {
		position: absolute;
		width: 5.7rem;
		z-index: 100;
		top: 27rem;
		left: 10.6rem;
		text-align: center;
		color: #fff;

		img {
			width: 5.5rem;
			height: 5.5rem;
		}

		p {font-size: 0.8rem}
	}

	.jf {
		font-size: 2.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.54rem;
		left: 21.5rem;
	}

	.tag {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 11.2rem;
		left: 14.8rem;
		width: 11rem;
		height: 2.6rem;
	}

	.name {
		font-size: 1.5rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 18rem;
		left: 2.3rem;
		width: 10rem;
		height: 2.2rem;
		line-height: 2.2rem;
		font-weight: bold;
	}

	.jobname {
		font-size: 1.2rem;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 20rem;
		left: 2.3rem;
		width: 10rem;
		height: 2.2rem;
		line-height: 2.2rem;
	}

	.tel {
		font-size: 1.2rem;
		text-align: center;
		color: #fff;
		position: absolute;
		z-index: 101;
		top: 3.5rem;
		left: 9.3rem;
		width: 8rem;
		height: 2.2rem;
		line-height: 2.2rem;
	}

	.djpf {
		    text-align: center;
			color: #fff;
			position: absolute;
			z-index: 101;
			top: 1rem;
			left: -0.7rem;
			width: 8rem;
			height: 2.2rem;
		span{
			font-size: 3rem;
		}
	}

	.info {
		    font-size: 1rem;
			color: #fff;
			position: absolute;
			z-index: 101;
			top: 16rem;
			left: 15.8rem;
			width: 9rem;
			text-align: right;
		span {
			font-weight: bolder;
			display: block;
		}
	}
}

.generate {
	position: absolute;
	width: 100%;
	z-index: 150;
	img {
		width: 100%;
		position: absolute;
		z-index: 160;
	}
}

.buildOkbar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 6rem;
	z-index: 180;
}

.loadingbox {
	position: absolute;
	z-index: 109;
	background-color: #fff;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	not supported by any browser */
}
